import React, {Component} from 'react';
import {View, Text, ImageBackground, StatusBar, TouchableOpacity, StyleSheet} from 'react-native';
import {pxToDp} from "../../../../utils/styleKits";

// 自定义顶部切换栏
class CustomBar extends Component {
  render() {
    const {tabs, goToPage, activeTab} = this.props;
    return (
      <View>
        <StatusBar translucent={true} backgroundColor={"transparent"}/>
        <ImageBackground source={require('../../../../images/rectanglecopy.png')} style={styles.bg}>
          <View style={styles.tabBox}>
            {
              tabs.map((item, i) => {
                return <TouchableOpacity style={[styles.touchable, {borderBottomWidth: activeTab === i ? pxToDp(3) : 0}]}
                                         onPress={()=>goToPage(i)}>
                  <Text style={{
                    color: activeTab === i ? '#fff' : '#ddd',
                    fontSize: activeTab === i ? pxToDp(18) : pxToDp(12),
                  }}
                  >{item}</Text>
                </TouchableOpacity>
              })
            }
          </View>
        </ImageBackground>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  bg: {
    width: '100%',
    height: pxToDp(80),
    paddingTop: pxToDp(20),
    justifyContent: 'center',
    alignItems: 'center',
  },
  tabBox: {
    flexDirection: 'row',
    height: '100%'
  },
  touchable: {
    marginLeft: pxToDp(10),
    marginRight: pxToDp(10),
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomColor: '#fff',
  }
});

export default CustomBar;